<template>
 <div class="body">

  <div class="main">
    <!-- 头部 -->
    <div class="">
      <span style="margin-left: 20px;;font-weight: 700;font-size: 14px;">
        关键字
        <el-input
          size="small"
          style="width: 330px;margin-left: 10px"
          placeholder="根据编号搜索"
          v-model="paging.keyword"
          clearable>
        </el-input>
        <span style="float: right;">
          <el-button size="small" @click="empty">清除</el-button>
          <el-button size="small" type="primary" @click="getRandoms">搜索</el-button>
        </span>
      </span>
      <el-alert
        :closable="false"
        style="margin-top: 10px;margin-bottom: 10px;"
        :title="`数据一共${counts}条`"
        type="info"
        show-icon>
      </el-alert>
    </div>
    <!-- 表格 -->
    <div style="margin-top: 10px;margin-bottom: 10px;">

      <el-table
        :data="tableData"
        :border="false"
        style="width: 100%">
        <el-table-column
          prop="id"
          label="编号">
        </el-table-column>
        <el-table-column
          prop="questionType"
          width="50px"
          label="题型">
          <div slot-scope="{row}">
            <div v-if="row.questionType==1">单选</div>
            <div v-if="row.questionType==2">多选</div>
            <div v-if="row.questionType==3">简答</div>
          </div>
        </el-table-column>
        <el-table-column
          label="题目编号">
          <template slot-scope="{row}">
            <div v-for="item in row.questionIDs" :key="item.number"><a href="javascript:void(0)" style="color:#4fc1fc;" @click="getDetail(item.id)">{{item.number}}</a></div>
          </template>
        </el-table-column>
        <el-table-column
          prop="province"
          label="录入时间">
          <div slot-scope="{row}">
           {{parseTime(row.addTime)}}
          </div>
        </el-table-column>
        <el-table-column
          prop="totalSeconds"
          label="答题时间(s)"
          width="150px">
        </el-table-column>
        <el-table-column
          prop="accuracyRate"
          label="正确率(s)"
          width="150px">
          <div slot-scope="{row}">
            {{row.accuracyRate+"%"}}
          </div>
        </el-table-column>
        <el-table-column
          prop="userName"
          width="150px"
          label="录入人">
        </el-table-column>
        <el-table-column
          width="150px"
          label="操作"
        >
          <template slot-scope="{row}">
            <el-button type="danger" style="background-color: #fef0f0; color: #f89881;" @click="open(row)" size="small" icon="el-icon-delete" circle></el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>
    <!-- 分页 -->
    <div class="">
      <el-pagination
        background
        class="paging"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="paging.page"
        :page-sizes="[10, 15, 20, 30]"
        :page-size="paging.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="counts">
      </el-pagination>

    </div>
  </div>

  <!-- 弹出框 -->
  <QuestionPreview :visible.sync="visible" ref="questionPreview"></QuestionPreview>

 </div>
</template>
<script>
import QuestionPreview from '@/module-hmmm/components/question-preview'
import { parseTime } from '@/utils'
import { randoms, removeRandoms } from '@/api/hmmm/questions'
export default {
  components: {
    QuestionPreview
  },
  data () {
    return {
      /* 表单数据 */
      tableData: [],
      /* 分页参数,与搜索条件 */
      paging: {
        page: 1,
        pagesize: 10,
        keyword: ''
      },
      /* 总条数 */
      counts: 0,
      /* 控制开关 */
      visible: false,
      /* 弹窗数据 */
      id: {}
    }
  },
  created () {
    this.getRandoms()
  },
  computed: {
  },
  methods: {
    parseTime,
    /* 删除业务 */
    open (row) {
      this.$confirm('此操作将永久删除该题组, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await removeRandoms(row)
        this.getRandoms()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        // this.$message({
        //   type: 'info',
        //   message: '已取消删除'
        // })
      })
    },
    /* 获取基本基础数据列表 */
    async getRandoms () {
      const res = await randoms(this.paging)
      this.counts = res.data.counts
      this.tableData = res.data.items
      //
    },
    /* 分页 */
    handleSizeChange (val) {
      //
      this.paging.pagesize = val
      this.getRandoms()
    },
    handleCurrentChange (val) {
      //
      this.paging.page = 1
      this.paging.page = val
      this.getRandoms()
    },
    /* 清空搜索条件 */
    empty () {
      this.paging = {
        page: 1,
        pagesize: 10,
        keyword: ''
      }
      this.getRandoms()
    },
    async getDetail (id) {
      this.visible = true
      this.$refs.questionPreview.getQuestionDetail(id)
    }
  }
}
</script>
<style lang='scss'  scoped>
.main{
  margin: 15px;
  background-color: #fff;
  padding: 20px;
  box-shadow: 0px 0px 5px 5px rgb(128, 128, 128,0.1);
  .paging{
    // left: 10px;
    text-align: right;
  }
}
</style>
